/*
 * @Author: your name
 * @Date: 2021-03-03 18:34:23
 * @LastEditTime: 2021-05-28 11:56:06
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \game-sdk-backend\src\layouts\SiderbarMenu\index.tsx
 */
import React from 'react';
import { Menu, Layout, Row } from 'antd';
import { UserOutlined } from '@ant-design/icons';

import { Link } from 'umi';
import { layoutModel } from '../layoutModel';
import { IMenu } from '../interface';
import _ from 'lodash';
interface IProps {
  menu: IMenu[];
}
const SiderbarMenu = (props: IProps) => {
  const menuItem = (item: IMenu) => {
    return (
      <Menu.Item key={item.key}>
        <div>
          <div>
            <img src={item.icon ? require(`@/assets/img/${item.icon}`) : ''} />
          </div>
          <Link to={item.path!}>{item.name}</Link>
        </div>
      </Menu.Item>
    );
  };

  const selectedKeys = _.find(
    props.menu,
    (row) => row.path && location.pathname === row.path,
  )?.key;

  return (
    <Layout.Sider
      theme="light"
      width={140}
      className="sider"
      collapsed={layoutModel.collapsed}
      collapsible={layoutModel.collapsed}
    >
      <div className="logo" />
      <Menu
        theme="light"
        mode="inline"
        selectedKeys={[selectedKeys] || []}
        openKeys={layoutModel.openKeys}
        onOpenChange={(openKeys) => {
          layoutModel.openKeys = openKeys as string[];
        }}
        onSelect={({ item, key, keyPath, selectedKeys, domEvent }) => {
          layoutModel.selectedKeys = keyPath as string[];
        }}
      >
        {props.menu?.map((row: IMenu, index: number) => {
          if (row.children?.length) {
            return (
              <Menu.SubMenu
                key={row.key}
                icon={<UserOutlined />}
                title={row.name}
              >
                {row.children.map((cItem, k) => {
                  return (
                    <React.Fragment key={cItem.key}>
                      {menuItem(cItem)}
                    </React.Fragment>
                  );
                })}
              </Menu.SubMenu>
            );
          } else {
            return menuItem(row);
          }
        })}
      </Menu>
    </Layout.Sider>
  );
};
export default SiderbarMenu;
